<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="客户" title="报案理赔" title1=""></crumbs>
        </div>
        <div class="outtabbox">
            <div class="outtabitem" @click="changeouttab(0)">
                <div class="content">
                    <div :class="{ tabtext: true, blueactiveword: outtabflag === 0 }">长期保报案理赔</div>
                </div>
                <div class="border_b">
                    <div :class="{ line: true, blueactiveline: outtabflag === 0 }"></div>
                </div>
            </div>
            <div class="outtabitem" @click="changeouttab(1)">
                <div class="content">
                    <div :class="{ tabtext: true, blueactiveword: outtabflag === 1 }">日日保报案理赔</div>
                </div>
                <div class="border_b">
                    <div :class="{ line: true, blueactiveline: outtabflag === 1 }"></div>
                </div>
            </div>
        </div>
        <div v-show="outtabflag === 0">
            <div class="paddingbox">
                <div class="formbox">
                    <div class="top">
                        <div class="toptext">筛选</div>
                        <div class="utils">
                            <div class="clear flex flex-a-c" @click="handleExportLong">
                                <el-icon>
                                    <Download />
                                </el-icon>
                                <span class="mg-l-5">导出</span>
                            </div>
                            <div class="clear" @click="handleAddCaseLong">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>新增报案</span>
                            </div>
                            <div class="clear" @click="clearlonginsureform">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>清除</span>
                            </div>
                            <div class="clear" @click="openorclose">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>{{ openorcloseflag === false ? "收起" : "展开" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="formcontent">
                        <div class="formitem">
                            <div class="formitemflexone">
                                <div class="lable">公司名称：</div>
                                <el-select clearable class="inputw" v-model="companyid" filterable remote
                                    reserve-keyword @change="getlongbalp" placeholder="请输入公司名称"
                                    :remote-method="remoteMethod" :loading="loading">
                                    <el-option v-for="item in companylist" :key="item.id" :label="item.companyName"
                                        :value="item.id" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">派遣单位：</div>
                                <el-select class="inputw" clearable v-model="dispatchingAgencyid" filterable remote
                                    reserve-keyword @change="getlongbalp" placeholder="请输入派遣单位"
                                    :remote-method="remoteMethodpqdw" :loading="loading">
                                    <el-option v-for="item in dispatchingAgencylist" :key="item.id"
                                        :label="item.serveCompanyName" :value="item.id" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">出险人姓名：</div>
                                <el-input class="inputw" v-model="longoutinsurename" placeholder="请输入姓名" clearable
                                    @input="changelongoutinsurename" />
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">出险人手机号：</div>
                                <el-input class="inputw" v-model="longoutinsurephone" placeholder="请输入手机号" clearable
                                    @input="changelongoutinsurephone" />
                            </div>
                        </div>
                        <div class="formitem" v-show="openorcloseflag === false">
                            <div class="formitemflexone">
                                <div class="lable">保险状态：</div>
                                <el-select v-model="longinsurestatus" class="m-2 inputw" placeholder="全部" clearable
                                    @change="getlongbalp">
                                    <el-option v-for="item in longinsurestatuslist" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">所属商务：</div>
                                <el-select v-model="longsaleId" class="m-2 inputw" placeholder="请选择" clearable
                                    @change="getlongbalp" filterable remote :remote-method="remoteMethodsale"
                                    :loading="loading">
                                    <el-option v-for="item in saleList" :key="item.saleId" :label="item.saleName"
                                        :value="item.saleId" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">出险人身份证：</div>
                                <el-input class="inputw" v-model="longoutinsureidcode" placeholder="请输入身份证号码" clearable
                                    @input="changelongoutinsureidcode" />
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">报案人手机号：</div>
                                <el-input class="inputw" v-model="longpostinsurephone" placeholder="请输入报案人手机号" clearable
                                    @input="changelongpostinsurephone" />
                            </div>
                        </div>
                        <div class="formitem" v-show="openorcloseflag === false">
                            <div class="formitemflexone">
                                <div class="lable">保司名称：</div>
                                <el-select v-model="longinsuranceaudicode" class="m-2 inputw" placeholder="全部" clearable
                                    @change="getlongbalp">
                                    <el-option v-for="item in getlongtimeinsuranceaudicompanytlist"
                                        :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">材料状态：</div>
                                <el-select v-model="uploadStatus" class="m-2 inputw" placeholder="请选择" clearable
                                    @change="getlongbalp">
                                    <el-option v-for="item in uploadStatusoptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">是否骨折：</div>
                                <el-select v-model="hurtStatus" class="m-2 inputw" placeholder="请选择" clearable
                                           @change="getlongbalp">
                                    <el-option v-for="item in hurtStatusoptions" :key="item.value" :label="item.label"
                                               :value="item.value" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">出险日期：</div>
                                <el-date-picker @change="getlongbalp" :clearable="true" v-model="longinsuredate"
                                    type="daterange" value-format="YYYY-MM-DD" range-separator="-"
                                    start-placeholder="开始时间" end-placeholder="结束时间" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="paddingbox">
                <div class="accounttable">
                    <div class="insuredatabox">
                        <div class="listitem">
                            <div class="num">{{ longinsuredatalist.totalReportCaseCount }}</div>
                            <div class="text">案件总数</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ longinsuredatalist.totalClaimsPendingCount }}</div>
                            <div class="text">待理赔</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ longinsuredatalist.totalNotarizePriceCount }}</div>
                            <div class="text">已确认金额</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ longinsuredatalist.totalSettleLawsuitCount }}</div>
                            <div class="text">已结案</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ longinsuredatalist.totalRejectCount }}</div>
                            <div class="text">撤案/驳回</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ longinsuredatalist.totalFinalMoney }}</div>
                            <div class="text">已理赔金额</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ longinsuredatalist.totalEstimateMoney }}</div>
                            <div class="text">预估金额</div>
                        </div>
                    </div>
                    <div class="tableborder">
                        <el-table :data="getlongbalplist" :border="false" style="width: 100%;" :header-cell-style="{
                            background: '#FAFAFC',
                            color: '#202536',
                        }">
                            <template #empty>
                                <div class="emptyimg"><img src="../../assets/image/空状态.png" alt=""></div>
                            </template>
                            <el-table-column type="expand">
                                <template #default="props">
                                    <div class="tableinfocontent">
                                        <div class="infobox">
                                            <div class="infoitem">
                                                <div class="lable">出险时间：</div>
                                                <div class="lablecontent">{{ props.row.outDangerDate }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">出险地点：</div>
                                                <div class="lablecontent">{{ props.row.outDangerPlace }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">出险人手机号：</div>
                                                <div class="lablecontent">{{ props.row.outDangerPhone }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">出险人身份证：</div>
                                                <div class="lablecontent">{{ props.row.outDangerIdCardNo }}</div>
                                            </div>
                                        </div>
                                        <div class="infobox">
                                            <div class="infoitem">
                                                <div class="lable">投保日期：</div>
                                                <div class="lablecontent">{{ props.row.insurStartTime }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">投保方案：</div>
                                                <div class="lablecontent">{{ props.row.companyPlanName }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">报案人手机号：</div>
                                                <div class="lablecontent">{{ props.row.reportPhone }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288事故类型：</div>
                                                <div class="lablecontent">{{ props.row.accidentType === 1 ? '意外' : '工伤'
                                                    }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="infobox">
                                            <div class="infoitem">
                                                <div class="lable">严重伤情：</div>
                                                <div class="lablecontent">{{ props.row.hurtStatus === 1 ? '是' : "不是" }}
                                                </div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">报案材料：</div>
                                                <!-- <div class="lablecontent"
                                                    v-if="props.row.params === {} || props.row.params.fileUrl === []"
                                                    style="cursor: pointer;color: #3E5FF5;">暂无
                                                </div>
                                                <div class="lablecontent" v-else style="cursor: pointer;color: #3E5FF5;"
                                                    @click="looklonginsurebacl(props.row.params.fileUrl[0].fileUrl)">查看附件
                                                </div> -->
                                                <div v-if="props.row?.isUploaded" class="lablecontent">
                                                    已上传
                                                </div>
                                                <div v-else class="lablecontent">
                                                    未上传
                                                </div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288保司工种：</div>
                                                <div class="lablecontent">{{ props.row.originName }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288事故视频：</div>
                                                <template v-if="props.row?.params?.fileUrl?.length">
                                                    <div class="flex-start"
                                                        v-for="(item, index) in props.row?.params?.fileUrl"
                                                        :key="index">
                                                        <div v-if="!isPicture(item.fileUrl)" class="lablecontent"
                                                            @click="looklonginsurebacl(item.fileUrl)"
                                                            style="cursor: pointer;color: #3E5FF5;">
                                                            附件{{ index + 1 }}
                                                        </div>
                                                        <bigPicture v-else class="lablecontent"
                                                            style="cursor: pointer;color: #3E5FF5; width: 40px;"
                                                            :text="`附件${index + 1}`" :imageUrl="item.fileUrl" />
                                                    </div>
                                                </template>
                                                <div class="lablecontent" v-else>
                                                    暂无
                                                </div>
                                                <div class="flex-center" style="align-items: flex-start" v-if="false">
                                                    <img style="margin-left:10px;width: 12px;height: 12px;"
                                                        src="../../assets/image/video.png" alt="">
                                                    <span class="green fs12">上传视频</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="infobox">
                                            <div class="infoitem">
                                                <div class="lable">事故经过：</div>
                                                <div class="lablecontent">{{ props.row.accidentDetails }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288是否住院：</div>
                                                <div class="lablecontent" v-if="props.row.hospitalStatus">
                                                    {{ props.row.hospitalStatus === 1 ? '是' : '否' }}</div>
                                                <div class="lablecontent" v-if="!props.row.hospitalStatus">---</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288就诊医院：</div>
                                                <div class="lablecontent" v-if="props.row.visitHospital">
                                                    {{ props.row.visitHospital }}</div>
                                                <div class="lablecontent" v-if="!props.row.visitHospital">---</div>
                                            </div>
                                            <div class="infoitem">

                                            </div>
                                        </div>
                                        <div class="infoboxrnd">
                                            <div class="lable">案件进展：</div>
                                            <div class="timeline">
                                                <div style="margin-bottom: 13px;"
                                                    v-for="(ele, index) in props.row.reportCaseResultList"
                                                    :key="ele.id">
                                                    <div class="timelinecontent">
                                                        <div class="point"></div>
                                                        <div class="linetime">{{ ele.createTime }}</div>
                                                        <div class="lineoinfo">{{ ele.remark }}</div>
                                                        <div class="flex-center pointer" @click="deldesc(ele.id, 1)">
                                                            <img style="margin-left:10px;width: 12px;height: 12px;"
                                                                src="../../assets/image/del.png" alt="">
                                                            <span class="orange fs12">删除</span>
                                                        </div>
                                                    </div>
                                                    <div class="line"
                                                        v-show="index + 1 != props.row.reportCaseResultList.length">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="id" prop="id" width="60" />
                            <el-table-column label="状态" prop="reportStatus">
                                <template #default="props">
                                    <div v-show="props.row.reportStatus === 2" class="green">已结案</div>
                                    <div v-show="props.row.reportStatus === 1" class="blue">处理中</div>
                                    <div v-show="props.row.reportStatus === 3" class="red">已驳回</div>
                                    <div v-show="props.row.reportStatus === 0" class="yellow">待处理</div>
                                    <div v-show="props.row.reportStatus === 4" class="gray">已撤销</div>
                                    <div v-show="props.row.reportStatus === 5" class="cyan">已确认金额</div>
                                    <div v-show="props.row.reportStatus === 6" class="cyan">保险垫付</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="公司名" prop="companyName" />
                            <el-table-column label="出险人姓名" prop="outDangerUserName" />
                            <el-table-column label="被派遣单位" prop="serveCompanyName" />
                            <el-table-column label="承保公司" prop="insurCompanyName" />
                            <el-table-column label="可用工种" prop="occupationName">
                                <template #default="props">
                                    <div>
                                        {{ props.row.occupationName }}（{{ props.row.occupationLevel }}类）
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="金额">
                                <template #default="props">
                                    <div>预估金额：<span style="color: #FF7642;">{{ props.row.estimateMoney === null
                                        ? '--' : props.row.estimateMoney }}</span></div>
                                    <div>最终金额：<span style="color: #9497B1;">{{ props.row.finalMoney === null ?
                                        '--' : props.row.finalMoney }}</span></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="所属业务员" prop="salesName" width="130" />
                            <el-table-column label="录入时间" prop="createTime" width="200" />
                            <el-table-column label="操作">
                                <template #default="props">
                                    <span class="blue" style="cursor: pointer;"
                                        @click="longset(props.row.id, props.row.accidentType, props.row.reportStatus)">设置</span>

                                    <span
                                        v-if="canShowAdd(props.row.insurCompany) && hasPermission('period-insur:report-case-bccl:query')"
                                        class="blue mg-l-10" style="cursor: pointer;"
                                        @click="handleShowAddMaterial(props.row, 'long')">材料</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="paginationborder">
                        <pagination :total="longinsuretotal" :currentPage="longpagenumber" :pageSize="longpagesize"
                            @SizeChange="longinsureSizeChange" @CurrentChange="longinsureCurrentChange"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="outtabflag === 1">
            <div class="paddingbox">
                <div class="formbox">
                    <div class="top">
                        <div class="toptext">筛选</div>
                        <div class="utils">
                            <div class="clear flex flex-a-c" @click="handleExportDay">
                                <el-icon>
                                    <Download />
                                </el-icon>
                                <span class="mg-l-5">导出</span>
                            </div>
                            <div class="clear" @click="handleAddCaseDay">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>新增报案</span>
                            </div>
                            <div class="clear" @click="cleardayinsureform">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>清除</span>
                            </div>
                            <div class="clear" @click="openorclose">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>{{ openorcloseflag === false ? "收起" : "展开" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="formcontent">
                        <div class="formitem">
                            <div class="formitemflexone">
                                <div class="lable">公司名称：</div>
                                <el-select clearable class="inputw" v-model="daycompanyid" filterable remote
                                    reserve-keyword @change="getdaybalp" placeholder="请输入公司名称"
                                    :remote-method="remoteMethod" :loading="loading">
                                    <el-option v-for="item in companylist" :key="item.id" :label="item.companyName"
                                        :value="item.id" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">所属商务：</div>
                                <el-select v-model="daysaleId" class="m-2 inputw" placeholder="请选择" clearable
                                    @change="getdaybalp" filterable remote :remote-method="remoteMethodsale"
                                    :loading="loading">
                                    <el-option v-for="item in saleList" :key="item.saleId" :label="item.saleName"
                                        :value="item.saleId" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">出险人姓名：</div>
                                <el-input class="inputw" @input="changedayoutinsurename" v-model="dayoutinsurename"
                                    placeholder="请输入姓名" clearable />
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">出险人手机号：</div>
                                <el-input class="inputw" @input="changedayoutinsurephone" v-model="dayoutinsurephone"
                                    placeholder="请输入手机号" clearable />
                            </div>

                        </div>
                        <div class="formitem" v-show="openorcloseflag === false">
                            <div class="formitemflexone">
                                <div class="lable">材料状态：</div>
                                <el-select v-model="uploadStatusDay" class="m-2 inputw" placeholder="请选择" clearable
                                    @change="getdaybalp">
                                    <el-option v-for="item in uploadStatusoptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">保险状态：</div>
                                <el-select @change="getdaybalp" v-model="dayoutinsurestatus" clearable
                                    class="m-2 inputw" placeholder="全部">
                                    <el-option v-for="item in longinsurestatuslist" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">保司名称：</div>
                                <el-select @change="getdaybalp" clearable v-model="dayoutinsureservicecompany"
                                    class="m-2 inputw" placeholder="全部">
                                    <el-option v-for="item in getdayimeinsuranceaudicompanytlist" :key="item.dictValue"
                                        :label="item.dictLabel" :value="item.dictValue" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">报案人手机号：</div>
                                <el-input class="inputw" @input="changedaypostinsurephone" v-model="daypostinsurephone"
                                    placeholder="请输入报案人手机号" clearable />
                            </div>

                        </div>
                        <div class="formitem" v-show="openorcloseflag === false">
                            <div class="formitemflexone">
                                <div class="lable">是否骨折：</div>
                                <el-select v-model="hurtStatusDay" class="m-2 inputw" placeholder="请选择" clearable
                                           @change="getdaybalp">
                                    <el-option v-for="item in hurtStatusoptions" :key="item.value" :label="item.label"
                                               :value="item.value" />
                                </el-select>
                            </div>
                            <div class="formitemflexone">
                                <div class="lable">出险日期：</div>
                                <el-date-picker @change="changegetdaybalp" :clearable="true" v-model="dayoutinsuredate"
                                    type="daterange" value-format="YYYY-MM-DD" range-separator="-"
                                    start-placeholder="开始时间" end-placeholder="结束时间" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="paddingbox">
                <div class="accounttable">
                    <div class="insuredatabox">
                        <div class="listitem">
                            <div class="num">{{ dayinsuredatalist.totalReportCaseCount }}</div>
                            <div class="text">案件总数</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ dayinsuredatalist.totalClaimsPendingCount }}</div>
                            <div class="text">待理赔</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ dayinsuredatalist.totalNotarizePriceCount }}</div>
                            <div class="text">已确认金额</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ dayinsuredatalist.totalSettleLawsuitCount }}</div>
                            <div class="text">已结案</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ dayinsuredatalist.totalRejectCount }}</div>
                            <div class="text">撤案/驳回</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ dayinsuredatalist.totalFinalMoney }}</div>
                            <div class="text">已理赔金额</div>
                        </div>
                        <div class="listitem">
                            <div class="num">{{ dayinsuredatalist.totalEstimateMoney }}</div>
                            <div class="text">预估金额</div>
                        </div>
                    </div>
                    <div class="tableborder">
                        <el-table :data="getdaybalplist" :border="false" style="width: 100%;" :header-cell-style="{
                            background: '#FAFAFC',
                            color: '#202536',
                        }">
                            <template #empty>
                                <div class="emptyimg"><img src="../../assets/image/空状态.png" alt=""></div>
                            </template>
                            <el-table-column type="expand">
                                <template #default="props">
                                    <div class="tableinfocontent">
                                        <div class="infobox">
                                            <div class="infoitem">
                                                <div class="lable">出险时间：</div>
                                                <div class="lablecontent">{{ props.row.outDangerDate }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">出险地点：</div>
                                                <div class="lablecontent">{{ props.row.outDangerPlace }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">出险人手机号：</div>
                                                <div class="lablecontent">{{ props.row.outDangerPhone }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">出险人身份证：</div>
                                                <div class="lablecontent">{{ props.row.idCardNo }}</div>
                                            </div>
                                        </div>
                                        <div class="infobox">
                                            <div class="infoitem" style="flex: 2;">
                                                <div class="lable">保障区间：</div>
                                                <div class="lablecontent">{{ props.row.insureDate }}至{{ GetDateTime(new
                                                    Date((new Date(props.row.insureDate).getTime() + 86400000))) }}
                                                </div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">报案人手机号：</div>
                                                <div class="lablecontent">{{ props.row.reportPhone }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288事故类型：</div>
                                                <div class="lablecontent">{{ props.row.accidentType === 1 ? '意外' : '工伤'
                                                    }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="infobox">
                                            <div class="infoitem">
                                                <div class="lable">严重伤情：</div>
                                                <div class="lablecontent">{{ props.row.hurtStatus === 1 ? '是' : "不是" }}
                                                </div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">报案材料：</div>
                                                <!-- <div class="lablecontent"
                                                    v-if="props.row.fileList === [] || props.row.fileList === '' || props.row.fileList === null"
                                                    style="cursor: pointer;color: #3E5FF5;">暂无
                                                </div>
                                                <div class="lablecontent" style="cursor: pointer;color: #3E5FF5;"
                                                    @click="looklonginsurebacl(props.row.fileList[0])">查看附件
                                                </div> -->
                                                <div v-if="props.row?.isUploaded" class="lablecontent">
                                                    已上传
                                                </div>
                                                <div v-else class="lablecontent">
                                                    未上传
                                                </div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288投保方案：</div>
                                                <div class="lablecontent">{{ props.row.reportPlan }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288事故视频：</div>
                                                <!-- <template v-if="props.row?.params?.fileUrl?.length">
                                                    <div v-for="(item, index) in props.row?.params?.fileUrl" :key="index">
                                                        <div v-if="!isPicture(item.fileUrl)" class="lablecontent"
                                                            @click="looklonginsurebacl(item.fileUrl)"
                                                            style="cursor: pointer;color: #3E5FF5;">
                                                            附件{{ index + 1 }}
                                                        </div>
                                                        <bigPicture v-else class="lablecontent"
                                                            style="cursor: pointer;color: #3E5FF5; width: 40px;" :text="`附件${index + 1}`"
                                                            :imageUrl="item.fileUrl" />
                                                    </div>
                                                </template> -->
                                                <template v-if="props.row?.fileList?.length">
                                                    <div class="flex-start" v-for="(item, index) in props.row?.fileList"
                                                        :key="index">
                                                        <div v-if="!isPicture(item)" class="lablecontent"
                                                            @click="looklonginsurebacl(item)"
                                                            style="cursor: pointer;color: #3E5FF5;">
                                                            附件{{ index + 1 }}
                                                        </div>
                                                        <bigPicture v-else class="lablecontent"
                                                            style="cursor: pointer;color: #3E5FF5; width: 40px;"
                                                            :text="`附件${index + 1}`" :imageUrl="item" />

                                                    </div>
                                                </template>
                                                <div class="lablecontent" v-else>
                                                    暂无
                                                </div>
                                                <div class="flex-center" style="align-items: flex-start;" v-if="false">
                                                    <img style="margin-left:10px;width: 12px;height: 12px;"
                                                        src="../../assets/image/video.png" alt="">
                                                    <span class="green fs12">上传视频</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="infobox">
                                            <div class="infoitem">
                                                <div class="lable">事故经过：</div>
                                                <div class="lablecontent">{{ props.row.accidentDetails }}</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288是否住院：</div>
                                                <div class="lablecontent" v-if="props.row.hospitalStatus">
                                                    {{ props.row.hospitalStatus === 1 ? '是' : '否' }}
                                                </div>
                                                <div class="lablecontent" v-if="!props.row.hospitalStatus">---</div>
                                            </div>
                                            <div class="infoitem">
                                                <div class="lable">&#12288&#12288就诊医院：</div>
                                                <div class="lablecontent" v-if="props.row.visitHospital">
                                                    {{ props.row.visitHospital }}</div>
                                                <div class="lablecontent" v-if="!props.row.visitHospital">---</div>
                                            </div>
                                            <div class="infoitem">

                                            </div>
                                        </div>
                                        <div class="infoboxrnd">
                                            <div class="lable">案件进展：</div>
                                            <div class="timeline">
                                                <div style="margin-bottom: 13px;"
                                                    v-for="(ele, index) in props.row.results" :key="ele.id">
                                                    <div class="timelinecontent">
                                                        <div class="point"></div>
                                                        <div class="linetime">{{ ele.createTime }}</div>
                                                        <div class="lineoinfo">{{ ele.reportRemark }}</div>
                                                        <div class="flex-center pointer" @click="deldesc(ele.id, 2)">
                                                            <img style="margin-left:10px;width: 12px;height: 12px;"
                                                                src="../../assets/image/del.png" alt="">
                                                            <span class="orange fs12">删除</span>
                                                        </div>
                                                    </div>
                                                    <div class="line" v-show="index + 1 != props.row.results.length">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="id" prop="id" width="60" />
                            <el-table-column label="状态" prop="reportStatus">
                                <template #default="props">
                                    <div v-show="props.row.reportStatus === 2" class="green">已结案</div>
                                    <div v-show="props.row.reportStatus === 1" class="blue">处理中</div>
                                    <div v-show="props.row.reportStatus === 3" class="red">已驳回</div>
                                    <div v-show="props.row.reportStatus === 0" class="yellow">待处理</div>
                                    <div v-show="props.row.reportStatus === 4" class="gray">已撤销</div>
                                    <div v-show="props.row.reportStatus === 5" class="cyan">已确认金额</div>
                                    <div v-show="props.row.reportStatus === 6" class="cyan">保险垫付</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="公司名" prop="companyName" />
                            <el-table-column label="出险人姓名" prop="outDangerUserName" />
                            <el-table-column label="被派遣单位" prop="serveCompanyName" />
                            <el-table-column label="承保公司" prop="insureCompanyName" />
                            <el-table-column label="金额">
                                <template #default="props">
                                    <div>预估金额：<span style="color: #FF7642;">{{ props.row.estimateMoney === null
                                        ? '--' : props.row.estimateMoney }}</span></div>
                                    <div>最终金额：<span style="color: #9497B1;">{{ props.row.finalMoney === null ?
                                        '--' : props.row.finalMoney }}</span></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="所属业务员" width="130">
                                <template #default="props">
                                    <div>{{ props.row?.sales?.salesName }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="录入时间" prop="createTime" width="200" />
                            <el-table-column label="操作">
                                <template #default="props">
                                    <span class="blue" style="cursor: pointer;"
                                        @click="dayset(props.row.id, props.row.accidentType, props.row.reportStatus, props.row.insureCompanyType, props.row.companyId)">设置</span>
                                    <span
                                        v-if="canShowAdd(props.row.insureCompanyType) && hasPermission('WesureReportCase:report-case-bccl:query')"
                                        class="blue mg-l-10" style="cursor: pointer;"
                                        @click="handleShowAddMaterial(props.row, 'day')">材料</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="paginationborder">
                        <pagination :total="dayinsuretotal" :currentPage="daypagenumber" :pageSize="daypagesize"
                            @SizeChange="dayinsureSizeChange" @CurrentChange="dayinsureCurrentChange"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- 长期保案件设置弹窗 -->
        <el-dialog v-model="dialoglonginsuresetVisible" title="案件设置" width="450">
            <el-form ref="longruleFormRef" :model="longruleForm" label-position="top" require-asterisk-position="right"
                :rules="longrules" label-width="120px" class="demo-ruleForm" status-icon>
                <el-form-item label="案件状态" prop="status">
                    <el-select v-model="longruleForm.status" placeholder="请选择案件状态">
                        <el-option v-for="item in longinsurestatuslist" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="进度内容" prop="content">
                    <el-input v-model="longruleForm.content" />
                </el-form-item>
                <el-form-item label="预估金额" prop="estimatedprice">
                    <el-input-number placeholder="请输入金额" style="width: 300px;" v-model="longruleForm.estimatedprice"
                        :min="0" />
                </el-form-item>
                <el-form-item label="赔付金额" prop="endprice">
                    <el-input-number placeholder="请输入金额" style="width: 300px;" v-model="longruleForm.endprice"
                        :min="0" />
                </el-form-item>
                <el-form-item label="查看权限" prop="permission">
                    <el-radio-group v-model="longruleForm.permission">
                        <el-radio label="1">客户不可见</el-radio>
                        <el-radio label="0">客户可见</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="flexcenterbox">
                    <el-button @click="longresetForm(longruleFormRef)" class="my_cancelbtn">取消</el-button>
                    <el-button type="primary" @click="longsubmitForm(longruleFormRef)" class="my_btn">
                        确定
                    </el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- 日日保案件设置弹窗 -->
        <el-dialog v-model="dialogdayinsuresetVisible" title="案件设置" width="450">
            <el-form ref="dayruleFormRef" :model="dayruleForm" label-position="top" require-asterisk-position="right"
                :rules="longrules" label-width="120px" class="demo-ruleForm" status-icon>
                <el-form-item label="案件状态" prop="status">
                    <el-select v-model="dayruleForm.status" placeholder="请选择案件状态">
                        <el-option v-for="item in longinsurestatuslist" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="进度内容" prop="content">
                    <el-input v-model="dayruleForm.content" />
                </el-form-item>
                <el-form-item label="预估金额" prop="estimatedprice">
                    <el-input-number placeholder="请输入金额" style="width: 300px;" v-model="dayruleForm.estimatedprice"
                        :min="0" />
                </el-form-item>
                <el-form-item label="赔付金额" prop="endprice">
                    <el-input-number placeholder="请输入金额" style="width: 300px;" v-model="dayruleForm.endprice"
                        :min="0" />
                </el-form-item>
                <el-form-item label="查看权限" prop="permission">
                    <el-radio-group v-model="dayruleForm.permission">
                        <el-radio label="1">客户不可见</el-radio>
                        <el-radio label="0">客户可见</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="flexcenterbox">
                    <el-button @click="dayresetForm(dayruleFormRef)" class="my_cancelbtn">取消</el-button>
                    <el-button type="primary" @click="daysubmitForm(dayruleFormRef)" class="my_btn">
                        确定
                    </el-button>
                </div>
            </el-form>
        </el-dialog>
        <addMaterial v-model:show="showAddMaterial" :insure-type="insureType" :cur-item="curItem" />
        <addCaseLong v-model:show="showAddLong" />
        <addCaseDay v-model:show="showAddDay" @success="handleDaySuccess" />

    </div>
</template>

<script setup lang="ts">
import crumbs from '../../components/crumbs.vue'
import {
    summarizingwesurereportcasedataapi,
    summarizinginsurreportcasedataapi,
    getcompanyapi,
    getDispatchingAgencyapi,
    dayinsurecasesetapione,
    dayinsurecasesetapitwo,
    longinsurecasesetapi,
    getdaybalpapi,
    getlongtimeinsuranceaudicompanytapi,
    getlongbalpapi,
    geteverydayinsuranceaudicompanytapi,
    deldescapi,
    deldescdayapi,
    getsaleapi
} from '../../api/api'
import { GetDate, shake, GetDateTime } from '../../utils/utils'
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { getMaterialInsureCompany } from '@/api/clients/index.ts'
import bigPicture from '@/components/bigPicture/index.vue'

import addMaterial from './components/drawer/addMaterial.vue'
import { useStore } from '../../store/index'
import addCaseLong from './components/drawer/addCaseLong.vue'
import addCaseDay from './components/drawer/addCaseDay.vue'
import { exportDay, exportLong } from '@/api/reportClaimAdjuster/addCase.ts'
import baseurl from '@/api/env.ts'
const store = useStore()

const router = useRouter()
const route = useRoute()
const insureCompanyList = ref([] as any)
const deldesc = (id: any, type: number) => {
    ElMessageBox.confirm(
        '确定删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            if (type === 1) {
                deldescapi({ id: id }).then((res: any) => {
                    console.log(res, 'gdhyhduyy')
                    getlongbalp()
                })
            } else {
                deldescdayapi({ id: id }).then((res: any) => {
                    console.log(res, 'gdhyhduyy')
                    getdaybalp()
                })
            }
        })
}
// onMounted(async () => {
//     insureCompanyList.value = await getMaterialInsureCompany()
//     getlongtimeinsuranceaudicompanyt()
//     geteverydayinsuranceaudicompanyt()
//     getlongbalp()
//     getdaybalp()
//     summarizinginsurreportcasedata()
// })
onActivated(async () => {
    insureCompanyList.value = await getMaterialInsureCompany()
    getlongtimeinsuranceaudicompanyt()
    geteverydayinsuranceaudicompanyt()
    getlongbalp()
    getdaybalp()
    summarizinginsurreportcasedata()
})
const longinsuredatalist = ref<any>({})
const dayinsuredatalist = ref<any>({})
const summarizingwesurereportcasedata = () => {
    summarizingwesurereportcasedataapi({}).then((res: any) => {
        console.log(res, '日日保数据整理')
        dayinsuredatalist.value = res
    })
}
const summarizinginsurreportcasedata = () => {
    summarizinginsurreportcasedataapi({}).then((res: any) => {
        console.log(res, '长期保数据整理')
        longinsuredatalist.value = res
    })
}
const canShowAdd = computed(() => {
    return (companyCode: string) => {
        return insureCompanyList.value.some((i: string) => i === companyCode)
    }
})

const isPicture = computed(() => {
    return (type: string) => {
        const picList = ['png', 'jpg', 'jpeg', 'gif', 'bmp']
        return picList.some((i) => type.toLowerCase().endsWith(i))
    }
})

const changegetdaybalp = (val: any) => {
    console.log(val)
    getdaybalp()
}
const dialoglonginsuresetVisible = ref(false)
const dialogdayinsuresetVisible = ref(false)
const dayoutinsurename = ref('')
const dayoutinsurephone = ref('')
const dayoutinsuredate = ref<any>([])
const dayoutinsurestatus = ref('')
const dayoutinsureservicecompany = ref('')
const daypostinsurephone = ref('')
const daycompanyid = ref('')
const longinsuranceaudicode = ref('')
const longpostinsurephone = ref('')
const longoutinsureidcode = ref('')
const longinsurestatus = ref('')
const longinsuredate = ref([] as any)
const longoutinsurephone = ref('')
const longoutinsurename = ref('')
const longinsuretotal = ref(0)
const dayinsuretotal = ref(0)
const companyid = ref('')
const dispatchingAgencyid = ref('')
const longruleForm = reactive<any>({
    permission: '1',
    endprice: null,
    estimatedprice: null,
    content: '',
    status: '',
})
const dayruleForm = reactive<any>({
    permission: '1',
    endprice: null,
    estimatedprice: null,
    content: '',
    status: '',
})
const longruleFormRef = ref<FormInstance>()
const dayruleFormRef = ref<FormInstance>()

const uploadStatus = ref('')
const uploadStatusDay = ref('')
const hurtStatus = ref('')
const hurtStatusDay = ref('')
const longrules = reactive({
    content: [{ required: true, message: '请输入进度内容', trigger: 'blur' }],
    status: [
        {
            required: true,
            message: '请选择案件状态',
            trigger: 'change',
        },
    ],
})
const longsubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            longinsurecaseset()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const longresetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialoglonginsuresetVisible.value = false
}
const daysubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            dayinsurecaseset()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const dayresetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogdayinsuresetVisible.value = false
}
// 案件id
const longajid = ref(0)
const longaccidentType = ref(1)
const longset = (e: any, t: any, s: any) => {
    longresetForm(longruleFormRef.value)
    dialoglonginsuresetVisible.value = true
    console.log(e)
    longajid.value = e
    longaccidentType.value = t
    longruleForm.status = s
}
const dayajid = ref(0)
const dayaccidentType = ref(1)
const dayinsureCompanyType = ref('')
const companyId = ref(0)
const dayset = (e: any, t: any, s: any, typecode: any, id: any) => {
    dayresetForm(dayruleFormRef.value)
    dialogdayinsuresetVisible.value = true
    console.log(e)
    dayajid.value = e
    dayaccidentType.value = t
    dayruleForm.status = s
    dayinsureCompanyType.value = typecode
    companyId.value = id
}
// 清除日日保筛选条件
const cleardayinsureform = () => {
    dayoutinsurename.value = ''
    dayoutinsurephone.value = ''
    dayoutinsuredate.value = []
    dayoutinsurestatus.value = ''
    dayoutinsureservicecompany.value = ''
    daypostinsurephone.value = ''
    daycompanyid.value = ''
    getdaybalp()
}
// 清除长期保筛选条件
const clearlonginsureform = () => {
    longinsuranceaudicode.value = ''
    longpostinsurephone.value = ''
    longoutinsureidcode.value = ''
    longinsurestatus.value = ''
    longinsuredate.value = ''
    longoutinsurephone.value = ''
    longoutinsurename.value = ''
    companyid.value = ''
    dispatchingAgencyid.value
    getlongbalp()
}
// 长期保案件设置
const longinsurecaseset = () => {
    longinsurecasesetapi({
        accidentType: longaccidentType.value,
        reportStatus: longruleForm.status,
        reportCaseId: longajid.value,
        reportRemark: longruleForm.content,
        estimateMoney: longruleForm.estimatedprice,
        finalMoney: longruleForm.endprice,
        isVisible: longruleForm.permission,
    }).then((res) => {
        getlongbalp()
        dialoglonginsuresetVisible.value = false
        longresetForm(longruleFormRef.value)
    })
}
// 日日保案件设置
const dayinsurecaseset = () => {
    dayinsurecasesetapione({
        companyId: companyId.value,
        id: dayajid.value,
        reportStatus: dayruleForm.status,
        estimateMoney: dayruleForm.estimatedprice,
        finalMoney: dayruleForm.endprice,
    }).then((res) => {
        dayinsurecasesetapitwo({
            reportCaseId: dayajid.value,
            reportRemark: dayruleForm.content,
            reportSolveResult: dayruleForm.status,
            insureCompanyType: dayaccidentType.value,
            isVisible: dayruleForm.permission,
        }).then((res) => {
            getdaybalp()
            dialogdayinsuresetVisible.value = false
            dayresetForm(dayruleFormRef.value)
        })
    })
}
const changelongpostinsurephone = () => {
    shake(getlongbalp, 1000)
}
const changelongoutinsureidcode = () => {
    shake(getlongbalp, 1000)
}
const changelongoutinsurephone = () => {
    shake(getlongbalp, 1000)
}
const changelongoutinsurename = () => {
    shake(getlongbalp, 1000)
}
const changedaypostinsurephone = () => {
    shake(getdaybalp, 1000)
}
const changedayoutinsurephone = () => {
    shake(getdaybalp, 1000)
}
const changedayoutinsurename = () => {
    shake(getdaybalp, 1000)
}
// 长期保报案理赔列表
const getlongbalplist = ref<any>([])
// 日日保报案理赔列表
const getdaybalplist = ref<any>([])
// 长期保保司列表
const getlongtimeinsuranceaudicompanytlist = ref<any>([])
// 日日保保司列表
const getdayimeinsuranceaudicompanytlist = ref<any>([])
// 长期保日日保状态列表
const longinsurestatuslist = ref([
    {
        label: '待受理',
        value: 0,
    },
    {
        label: '处理中',
        value: 1,
    },
    {
        label: '已结案',
        value: 2,
    },
    {
        label: '已驳回',
        value: 3,
    },
    {
        label: '已撤销',
        value: 4,
    },
    {
        label: '已确认金额',
        value: 5,
    },
    {
        label: '保险垫付',
        value: 6,
    },
])
const longinsureCurrentChange = (e: any) => {
    console.log(e)
    longpagenumber.value = e
    getlongbalp()
}
const longinsureSizeChange = (e: any) => {
    console.log(e)
    longpagesize.value = e
    longpagenumber.value = 1
    getlongbalp()
}
const dayinsureCurrentChange = (e: any) => {
    console.log(e)
    daypagenumber.value = e
    getdaybalp()
}
const dayinsureSizeChange = (e: any) => {
    console.log(e)
    daypagesize.value = e
    daypagenumber.value = 1
    getdaybalp()
}
// 声明派遣单位列表
const dispatchingAgencylist = ref<any>([])
// 声明公司列表
const companylist = ref<any>([])
const remoteMethod = (query: string) => {
    if (query) {
        shake(() => {
            loading.value = true
            getcompany(query)
        }, 500)
    } else {
        companylist.value = []
    }
}
const remoteMethodsale = (query: string) => {
    if (query) {
        loading.value = true
        getsale(query)
    } else {
        saleList.value = []
    }
}
const saleList = ref([] as any)
const getsale = async (val: any) => {
    const res = await getsaleapi({ isSelectSale: 1, salesName: val })
    console.log(res, '获取商务列表')
    saleList.value = res
    loading.value = false
}
const longsaleId = ref('')
const daysaleId = ref('')
const loading = ref(false)
// 获取公司列表
const getcompany = async (val: any) => {
    const res: any = await getcompanyapi(val)
    console.log(res, '获取公司列表')
    companylist.value = res
    const statusMap = {
        0: '待审核',
        1: '审核通过',
        2: '审核驳回',
    } as any
    companylist.value.forEach((i: any) => {
        i.companyName =
            i.companyName +
            (i.auditStatus || i.auditStatus === 0
                ? `（${statusMap[i.auditStatus]}）`
                : '')
    })
    loading.value = false
    getlongtimeinsuranceaudicompanyt()
}
// 获取派遣单位列表
const getDispatchingAgency = async (val: any) => {
    const res: any = await getDispatchingAgencyapi(val)
    console.log(res, '获取派遣单位列表')
    dispatchingAgencylist.value = res
}
const loadingpqdw = ref(false)
const remoteMethodpqdw = (query: string) => {
    console.log(query)
    if (query) {
        loadingpqdw.value = true
        getDispatchingAgency(query)
    } else {
        dispatchingAgencylist.value = []
    }
}
// 获取长期保保司
const getlongtimeinsuranceaudicompanyt = async () => {
    const res = await getlongtimeinsuranceaudicompanytapi()
    console.log(res, '长期保保司')
    getlongtimeinsuranceaudicompanytlist.value = res
}
// 获取日日保保司
const geteverydayinsuranceaudicompanyt = async () => {
    const res = await geteverydayinsuranceaudicompanytapi()
    console.log(res, '日日保保保司')
    getdayimeinsuranceaudicompanytlist.value = res
}
const longpagesize = ref(10)
const longpagenumber = ref(1)
const daypagesize = ref(10)
const daypagenumber = ref(1)
const getdaybalp = async () => {
    console.log(dayoutinsuredate.value)

    const res: any = await getdaybalpapi({
        salesId: daysaleId.value,
        pageNum: daypagenumber.value,
        pageSize: daypagesize.value,
        companyId: daycompanyid.value,
        outDangerUserName: dayoutinsurename.value,
        outDangerPhone: dayoutinsurephone.value,
        reportPhone: daypostinsurephone.value,
        reportStatus: dayoutinsurestatus.value,
        insureCompanyType: dayoutinsureservicecompany.value,
        beginOutDangerDate:
            dayoutinsuredate.value === null ||
                dayoutinsuredate.value.length === 0
                ? ''
                : dayoutinsuredate.value[0],
        endOutDangerDate:
            dayoutinsuredate.value === null ||
                dayoutinsuredate.value.length === 0
                ? ''
                : dayoutinsuredate.value[1],
        uploadStatus: uploadStatusDay.value,
        hurtStatus: hurtStatusDay.value??''
    })
    console.log(res, '日日保报案理赔列表')
    getdaybalplist.value = res.rows
    dayinsuretotal.value = res.total
}
// 查询长期保报案理赔列表
const getlongbalp = async () => {
    const res: any = await getlongbalpapi({
        salesId: longsaleId.value,
        pageNum: longpagenumber.value,
        pageSize: longpagesize.value,
        companyId: companyid.value,
        serveCompanyId: dispatchingAgencyid.value,
        outDangerUserName: longoutinsurename.value,
        outDangerPhone: longoutinsurephone.value,
        outDangerIdCardNo: longoutinsureidcode.value,
        outDangerStartDate:
            longinsuredate.value === null ||
                longinsuredate.value.length === 0
                ? ''
                : longinsuredate.value[0],
        outDangerEndDate:
            longinsuredate.value === null ||
                longinsuredate.value.length === 0
                ? ''
                : longinsuredate.value[1],
        reportPhone: longpostinsurephone.value,
        reportStatus: longinsurestatus.value,
        insurCompany: longinsuranceaudicode.value,
        uploadStatus: uploadStatus.value,
        hurtStatus: hurtStatus.value??''
    })
    console.log(res, '长期保报案理赔列表')
    getlongbalplist.value = res.rows
    longinsuretotal.value = res.total
}
const outtabflag = ref(0)

const openorcloseflag = ref(false)
const openorclose = () => {
    openorcloseflag.value = !openorcloseflag.value
}
const looklonginsurebacl = (url: string) => {
    window.open(url)
}
// 切换tab
const changeouttab = (i: number) => {
    console.log(i)
    if (i === 1) {
        getdaybalp()
        summarizingwesurereportcasedata()
    } else {
        getlongbalp()
        summarizinginsurreportcasedata()
    }
    outtabflag.value = i
}
const shortcuts = [
    {
        text: '今天',
        value: new Date(),
    },
    {
        text: '昨天',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: '一周前',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
]
const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}
const back = () => {
    window.history.back()
}

const hasPermission = computed(() => {
    return (prem: string) => {
        return store.buttonPermission.some((i: string) => i === prem)
    }
})

const showAddMaterial = ref(false)
const curItem = ref(null)
const insureType = ref('long')

const handleShowAddMaterial = (item: any, type: string) => {
    curItem.value = item
    insureType.value = type
    showAddMaterial.value = true
}

// const getInsureCompanyList = () => {

//     getMaterialInsureCompany().then((res: any)=> {
//         console.log(222211111111111, res);
//     })
// }
const hurtStatusoptions = ref([
    {
        label: '全部',
        value: '',
    },
    {
        label: '是',
        value: '1',
    },
    {
        label: '否',
        value: '2',
    }
])
const uploadStatusoptions = ref([
    {
        label: '全部',
        value: '',
    },
    {
        label: '已上传',
        value: 1,
    },
    {
        label: '未上传',
        value: 0,
    },
])

// 新增长期保报案
const showAddLong = ref(false)
const handleAddCaseLong = () => {
    console.log(111)
    showAddLong.value = true
}

// 新增日日保报案
const showAddDay = ref(false)
const handleAddCaseDay = () => {
    showAddDay.value = true
}

const handleDaySuccess = () => {
    daypagenumber.value = 1
    getdaybalp()
}

const handleExportLong = () => {
    const query = {
        // pageNum: longpagenumber.value,
        // pageSize: longpagesize.value,
        companyId: companyid.value,
        serveCompanyId: dispatchingAgencyid.value,
        outDangerUserName: longoutinsurename.value,
        outDangerPhone: longoutinsurephone.value,
        outDangerIdCardNo: longoutinsureidcode.value,
        outDangerStartDate:
            longinsuredate.value === null ||
                longinsuredate.value.length === 0
                ? ''
                : longinsuredate.value[0],
        outDangerEndDate:
            longinsuredate.value === null ||
                longinsuredate.value.length === 0
                ? ''
                : longinsuredate.value[1],
        reportPhone: longpostinsurephone.value,
        reportStatus: longinsurestatus.value,
        insurCompany: longinsuranceaudicode.value,
        uploadStatus: uploadStatus.value,
    }
    exportLong(query).then((res: any) => {
        window.location.href =
            baseurl + '/common/download?delete=true&fileName=' + res
    })
    console.log(1111, query)
}

const handleExportDay = () => {
    const query = {
        // pageNum: daypagenumber.value,
        // pageSize: daypagesize.value,
        companyId: daycompanyid.value,
        outDangerUserName: dayoutinsurename.value,
        outDangerPhone: dayoutinsurephone.value,
        reportPhone: daypostinsurephone.value,
        reportStatus: dayoutinsurestatus.value,
        insureCompanyType: dayoutinsureservicecompany.value,
        beginOutDangerDate:
            dayoutinsuredate.value === null ||
                dayoutinsuredate.value.length === 0
                ? ''
                : dayoutinsuredate.value[0],
        endOutDangerDate:
            dayoutinsuredate.value === null ||
                dayoutinsuredate.value.length === 0
                ? ''
                : dayoutinsuredate.value[1],
        uploadStatus: uploadStatusDay.value,
    }
    exportDay(query).then((res: any) => {
        window.location.href =
            baseurl + '/common/download?delete=true&fileName=' + res
    })
}
</script>

<style scoped lang="scss">
.tableborder {
    border: 1px solid #eaeaef;
    border-bottom: none !important;
}

.paginationborder {
    border: 1px solid #eaeaef;
    padding-bottom: 16px;
}

.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.formbox {
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 12px 16px;
        width: 100%;
        box-sizing: border-box;

        .formitem {
            margin-top: 16px;
            display: flex;
            align-items: center;

            .formitemflexone {
                display: flex;
                align-items: center;
                width: 25%;
            }

            .lable {
                min-width: 100px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 16px 8px;
        align-items: center;
        border-bottom: 1px solid #f4f4f7;

        .toptext {
            color: #3d3d3d;
            font-size: 14px;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497b1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}

.outtabbox {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px;
    display: flex;
    align-items: center;
    background-color: #ffffff;

    .outtabitem {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 12px;
        min-width: 64px;
        margin-right: 32px;

        .border_b {
            width: 100%;
            height: 2px;
            box-sizing: border-box;
            padding: 0 14px;

            .line {
                width: 100%;
                background-color: #ffffff;
                height: 2px;
            }
        }

        .content {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            justify-content: center;
            min-width: 85px;
            position: relative;

            .tabtext {
                text-align: center;
                font-size: 16px;
                color: #9497b1;
            }

            .count {
                position: absolute;
                top: -5px;
                right: -4px;
                height: 14px;
                min-width: 16px;
                text-align: center;
                font-size: 12px;
                line-height: 14px;
                border-radius: 8px;
                background-color: #ff7642;
                color: #ffffff;
            }
        }
    }
}

.accounttable {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
}

.blueactiveword {
    color: #0256ff !important;
}

.blueactiveline {
    background-color: #0256ff !important;
}

.inputw {
    width: 200px;
}

.green {
    color: #00d679;
}

.res {
    color: #e05f42;
}

.blue {
    color: #3e5ff5;
}

.yellow {
    color: #ffa814;
}

.gray {
    color: #9497b1;
}

.tableinfocontent {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 39px;

    .infobox {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .infoitem {
            display: flex;
            flex: 1;

            .lable {
                flex-shrink: 0;
                color: #9497b1;
                font-size: 12px;
            }

            .lablecontent {
                color: #202536;
                font-size: 12px;
            }
        }
    }
}

.infoboxrnd {
    display: flex;

    .lable {
        color: #9497b1;
        font-size: 12px;
    }

    .timeline {
        box-sizing: border-box;
        position: relative;

        .line {
            width: 1px;
            height: 13px;
            background-color: #3e5ff5;
            position: absolute;
            margin-left: 2px;
        }

        .timelinecontent {
            display: flex;
            align-items: center;

            .point {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #0256ff;
                margin-right: 6px;
            }

            .linetime {
                color: #9497b1;
                font-size: 12px;
                margin-right: 8px;
            }

            .lineoinfo {
                font-size: 12px;
                color: #202536;
            }
        }
    }
}

:deep(.reset-text) {
    font-size: 12px;
    margin-top: -9px;
    width: 40px;
}

.insuredatabox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;

    .listitem {
        flex: 1;
        flex-shrink: 0;
        background-color: #f4f4f7;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 14px;
        padding-bottom: 8px;
        gap: 6px;

        .num {
            font-weight: 700;
            font-size: 16px;
            color: #202536;
        }

        .text {
            font-size: 12px;
            color: #565868;
        }
    }
}

.cyan {
    color: #00d6d6 !important;
}

.orange {
    color: #FF7642;
}

.fs12 {
    font-size: 12px;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-start {
    display: flex;
    align-items: start;
}

.pointer {
    cursor: pointer
}
</style>
